<template>
  <div>
    <p>{{name}}</p>
    <p>{{state.count}}</p>
  </div>
</template>

<script>
  //基本类型值（String 、Number 、Boolean 等）或单值对象（类似像 {count: 3} 这样只有一个属性值的对象）使用 ref
  //引用类型值（Object 、Array）使用 reactive
  import { ref , reactive } from 'vue'
  export default {
    name: "refData",
    setup(){
      const state = reactive({count:3})  //reactive 方法是用来创建一个响应式的数据对象

      const name = ref("小发");  //ref 就是通过 reactive 包装了一个对象,然后是将值传给该对象中的 value 属性、ref(obj) 理解为这个样子 reactive({value: obj})

      const obj = {count: 3}
      const state1 = ref(obj)
      const state2 = reactive(obj)

      console.log(state1)
      console.log(state2)


      return {name,state}
    },
  }
</script>

<style scoped>

</style>